<template>
 <div>
   <div class="head">
    <el-row>
      <el-col :span="12" >
      <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
      </el-col>
        <el-col :span="10" :offset="0">
        <!-- <el-button type="primary" icon="el-icon-search" @click="scarch">搜索</el-button> -->
          <el-button type="primary" icon=" el-icon-plus" @click="add">添加</el-button>  
      </el-col>
    </el-row>
   </div>
   <!--    @row-click="handleCurrentChange1" 行点击事件 -->
   <el-table :data="pageInfo.list" class="tb-edit"
   highlight-current-row

  style="width: 100%">
     <el-table-column prop="uid"  label="序号"  width="120"></el-table-column>
     <el-table-column prop="uname"  label="姓名"  width="120"></el-table-column>
     <el-table-column prop="username"  label="账号"  width="120">
       <!--  -->
           <!-- <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row.username" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> 
                    <span>{{scope.row.username}}</span>
              </template> -->

     </el-table-column>
     <el-table-column prop="phone"  label="手机号"  width="120"></el-table-column>
     <el-table-column prop="sex"  label="性别"  width="120"></el-table-column>
     <el-table-column prop="birthday"  label="生日"  width="120"></el-table-column>
     <el-table-column prop="photo"  label="头像"  width="120">
    <!-- 图片的显示 -->
        <template  slot-scope="scope">  
           <img :src="require('D://img//'+scope.row.photo)"  min-width="70" height="70" />
          
        </template> 
     </el-table-column>
     <el-table-column  label="职位"  width="120">
        <template slot-scope="scope">
　　　　 　<span v-if="scope.row.rid== '1'">管理员</span>
　　　　 　<span v-if="scope.row.rid== '2'">测试员</span>
          <span v-if="scope.row.rid== '3'">2</span>
　　　　 　<span v-if="scope.row.rid== '4'">3</span>
          <span v-if="scope.row.rid== '5'">4</span>
　　　　 　<span v-if="scope.row.rid== '6'">5</span>
           <span v-if="scope.row.rid== '7'">6</span> 
　　　　</template>
     </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini"  @click="edit(scope.row)">编辑</el-button>
        <!-- <el-button size="mini" type="danger" >删除</el-button> -->
         <el-button size="mini" type="success" v-if="scope.row.state === 0"  @click="qiyong(scope.row.uid)">启用</el-button>
         <el-button size="mini" type="danger" v-if="scope.row.state === 1"  @click="jinyong(scope.row.uid)">禁用</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-count="pageInfo.pages"
      :current-page="pageNum"
      :page-sizes="limits"
      :page-size="pageSize"
      layout="total,sizes, prev, pager, next"
      >
      <!--  -->
    </el-pagination>
    <!-- 表单 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="序号" :label-width="formLabelWidth">
        <el-input hidden v-model="form.uid" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form.uname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="账户" :label-width="formLabelWidth">
        <el-input v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="phone" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
       <el-form-item label="sex" :label-width="formLabelWidth">
         <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="birthady" :label-width="formLabelWidth">
         <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="rid" :label-width="formLabelWidth">
       
        <el-select v-model="form.rid" placeholder="请选择活动职位">
          <el-option 
          v-for="role in roles"
          :key="role.rid"
          :label="role.rname" 
          :value="role.rid"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </div>
  </el-dialog>
 </div>
</template>

<script>
  export default {
    
    data() {
      return {
      
        roles:[],
        pageInfo: {
          list:[],
        },form: {},
        dialogFormVisible:false,
        input:'',
        formLabelWidth: '120px',
        limits:[3,5,7],
        pageSize:7,// limits 的第几条
        pageNum:1,// 第几页
        action:''
       
      }
    },
    created(){
      this.$http.get("/backuser/allRname").then(res=>{
        this.roles=res;
      })
      this.scarch();
    },
    methods: {
       handleCurrentChange1(row, event, column) {
                console.log(row, event, column, event.currentTarget)
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            // handleDelete(index, row) {
            //     console.log(index, row);
            // },
      submit(){
        this.dialogFormVisible=false;
        this.$http.get(this.action,{params:{...this.form}}).then(res=>{
           if(res){
               this.$message({message: '提交成功', type: 'success'});
               this.scarch();
           }else{
             this.$message.error("提交失败")
               this.scarch();
           }
        })
      },
      add(){
        this.dialogFormVisible=true;
        this.form={};
        this.action="/backuser/add"
      },

      edit(row) {
        this.dialogFormVisible=true;
        this.form=row;
        this.action="/backuser/update"
      },

      jinyong(uid) {
      this.$http.get('/backuser/state',{params:{uid:uid,state:0}}).then(res=>{
          if(res){
            this.$message("修改成功")
            this.scarch();
          }
        })
        
      },
       qiyong(uid) {
        this.$http.get('/backuser/state',{params:{uid:uid,state:1}}).then(res=>{
          if(res){
            this.$message("修改成功")
            this.scarch();
          }
        })
        
      },scarch(){
         this.$http.get('/backuser/finAll', {params: {pageNum: this.pageNum,pageSize:this.pageSize}}).then(res=>{
          this.pageInfo=res


        })
      },handleSizeChange(a){
       
        this.pageSize=a

        this.scarch();
      },handleCurrentChange(a){       
          this.pageNum=a
        this.scarch();
      }
      
    }
  }
</script>
<style scoped>
 .head{
   padding: 10px 5px;
 }
 .tb-edit .el-input {
    display: none
}
.tb-edit .current-row .el-input {
    display: block
}
.tb-edit .current-row .el-input+span {
    display: none
}
</style>

